const path = require('path');

const webpack = require('webpack');

const htmlWebpackplugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports= {
  mode: 'development',
  entry: path.join(__dirname, './src/main.js'),
  output: { 
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js' 
  },
  devServer: {
    hot: true
  },
  plugins: [  //插件池
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackplugin({
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    }),
    new VueLoaderPlugin()
  ],
  module: {  //配置第三方模块
    rules: [ //配置规则

      { test: /\.css$/, use: ['style-loader', 'css-loader'] },

      //{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },

      //该规则的图片默认都放在根目录下，若图片名字重复，会被后续图片覆盖
      //limit值决定图片是否要被base64重新编码（单位字节）小于原图大小就会如此，
      //大于等于时，图片会以原图显示，但名字会被hash重新命名，后缀不变
      // { test: /\.(jpg|jpeg|png|gif|bmp)$/, use: 'url-loader?limit=2658540' }

      //name规定图片名字和后缀  name=[name].[ext] 图片以原名显示，后缀不变
      //[hash:8]  表示会在图片名字前加8位hash编码字符串
      //注意：以base64编码的图片不受影响 
      { test: /\.(jpg|jpeg|png|gif|bmp)$/, use: 'url-loader?limit=2658540&name=[hash:8]-[name].[ext]' },

      //规定字体图标的规则
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },


      //exclude  排除掉node_modules目录，防止batel 将其中所有第三方 js文件都打包翻译
      //这样非常耗CPU，而且转换过的  项目也无法正常运行
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },

      { test: /\.vue/, use: 'vue-loader' }  //处理  vue组件 的loader
    ]
  },
  resolve: {
    alias: {  //修改vue包导入的路径
      "vue$": "vue/dist/vue.js"
    }
  }
}